<template>
  <div>
    <div class="tabsBox">
      <!-- <div class="tabsName">{{ tabsName[activeName] }}</div> -->
      <el-card shadow="never" style="margin-bottom: 30px; height: 500px">
        <el-tabs style="height: 200px" v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="柑橘特征" name="fea" style="font-weight: bold"
            ><p id="0" class="mes2">{{ data1.citrusFeatures }}</p></el-tab-pane
          >
          <el-tab-pane label="生长环境" name="env" class="lab"
            ><p id="1" class="mes2">{{ data1.citrusEnvironment }}</p></el-tab-pane
          >
          <el-tab-pane label="柑橘分布" name="dis"
            ><p id="2" class="mes2">{{ data1.citrusDistribution }}</p></el-tab-pane
          >
          <el-tab-pane label="柑橘分类" name="cha"
            ><p id="3" class="mes2">{{ data1.citrusCharacter }}</p></el-tab-pane
          >
          <el-tab-pane label="柑橘价值" name="val"
            ><div class="me"><p id="4" class="mes2">{{ data1.citrusValues }}</p></div></el-tab-pane
          >
           <el-tab-pane label="柑橘培养" name="cult"
            ><p id="5" class="mes2">{{ data1.citrusCultivate }}</p></el-tab-pane
          >
          <el-tab-pane label="柑橘存储" name="sto"
            ><p id="6" class="mes2">{{ data1.citrusStorage }}</p></el-tab-pane
          >
          <el-tab-pane label="柑橘文化" name="cul"
            ><p id="7" class="mes2">{{ data1.citrusCulture }}</p></el-tab-pane
          >
        </el-tabs>
      </el-card>
     </div>
     <el-button :class="{'show':loginStatus == 0,'edit':true}"  @click="handleEdit">编辑</el-button>
      <!-- 编辑表单 -->
      <el-dialog  title="编辑" :visible.sync="dialogVisible"  width="40%" :before-close="handleClose">
        <el-form ref="editForm" :model="editForm">
       <el-form-item label="编辑内容">
         <el-input type="textarea" v-model="editValue" :autosize="{minRows:10,maxRows:14}"></el-input>
       </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmEdit">确 定</el-button>
        </span>
      </el-dialog>
        
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: {},
      activeName: 'fea',
      loginStatus:0,
      editValue:'',
      tabsName: {
        fea: '柑橘特征',
        env: '生长环境',
        dis: '柑橘分布',
        cha: '柑橘分类',
        val: '柑橘价值',
        cult: '柑橘培养',
        sto: '柑橘存储',
        cul: '柑橘文化',
      },
      dialogVisible:false,
      editForm:{
        citrusBaikeId: "1",
        citrusFeatures: "", 
        citrusEnvironment: "",
        citrusDistribution: "",
        citrusCharacter: "",
        citrusStorage:"",
        citrusValues: "",
        citrusCultivate: "",
        citrusCulture: "",
        gmtCreate: "2024-04-23T12:52:03.872Z"
      },
    }
  },
  created() {
    this.getEncycloprdia()
  },
  mounted(){
    //获取状态码，判断是否为管理员或专家
    this.loginStatus = JSON.parse(window.localStorage.getItem('loginStatus'))
  },
  methods: {
    // 根据疾病名称获取对应农药
    async getEncycloprdia() {
      const { data: res } = await this.$http.get(`/dev3/orangeBaiKe/orange`)
      console.log(res)
      if (res.code === 0) {
        // let picAndInfo = res.data
        // let arr = Object.keys(picAndInfo).map(key=>{
        //   console.log(picAndInfo);
        //   return picAndInfo[key]
        // })
        // console.log(arr[0].values)
        this.data1 = res.data.citrusBaike
        this.editForm = res.data.citrusBaike
      }
      // console.log(this.data)
    },
    handleClick(tab, event) {
      console.log(tab.name, event)
      console.log(this.activeName)
      
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    handleEdit(){
      this.dialogVisible = true
      let id = Object.keys(this.tabsName).findIndex(item => item == this.activeName)
      // console.log(id)
      this.editValue = document.getElementById(`${id}`).innerHTML
      //封装格式化时间函数
      Date.prototype.Format = function (fmt) {
      var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "H+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
      }
      //格式时间
      let date = new Date().Format("yyyy-MM-ddTHH:mm:ssZ")
      this.editForm. gmtCreate = date
      console.log(this.editForm)
    },
    async confirmEdit(){
      this.dialogVisible = false
      let id = Object.keys(this.tabsName).findIndex(item => item == this.activeName)
      console.log(Object.keys(this.editForm))
      let str = Object.keys(this.editForm)[id + 1]
      console.log(id)
      console.log(str)
       this.editForm[`${str}`] = this.editValue 
       console.log(this.editForm)
       const { data: res } = await this.$http.put(`/dev3/orangeBaiKe/orange/update`, this.editForm)
      if (res.code === 0) {
        this.$message.success('编辑成功！')
      } else {
        this.$message.error('编辑失败！')
      }
    }
  },
}
</script>
<style scoped>
.body-card {
  width: 100%;
}
.card-left {
  width: 30%;
  float: left;
}
.card-right {
  width: 69%;
  float: right;
  margin-left: 1%;
}
.title {
  font-size: 20px;
  color: coral;
}
.tabsBox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.tabsName {
  font-size: 18px;
  color: #666;
}
::v-deep .el-tabs__content {
  overflow: visible;
}
::v-deep .el-tabs__item {
  font-size: 16px;
  color: #000;
}
::v-deep .el-tabs__item:hover {
  color: rgb(255, 102, 0);
}
::v-deep .el-tabs__item.is-active {
  color: rgb(255, 0, 0);
}
::v-deep .el-icon-arrow-left {
  color: #000;
}
::v-deep .el-icon-arrow-right {
  color: #000;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}
::v-deep .el-tabs__active-bar {
  background-color: rgb(255, 102, 0);
}
.imgBox {
  border: 1px solid #000;
  width: 270px;
  height: 240px;
}
.dashed {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: dashed 1px #e5e5e5;
}
.lab {
  font-weight: bold;
}
.mes {
  display: flex;
  align-items: center;
}
.mes1 {
  white-space: nowrap;
  font-weight: 700;
  margin-right: 15px;
}
.mes2 {
  font-weight: bold;
  font-size: 20px;
  color: coral;
  text-indent: 2em;
  height: 57vh;
  overflow: auto;
}
.footer {
  height: 10px;
}
.baseInfoBox {
  font-size: 18px;
}
.controlBox {
  font-size: 18px;
}
.el-divider--horizontal {
  margin-top: 0px;
  height: 3px;
  background-color: coral;
}
.picture img {
  margin-right: 10px;
  width: 285px;
  height: 245px;
}
.pictureChoose {
  margin-bottom: 25px;
}
::v-deep .el-radio__label {
  font-size: 17px;
}
.insecticideName {
  font-size: 19px;
  margin-right: 25px;
  cursor: pointer;
}
.insecticideName:hover {
  color: coral;
}
.dialog_span {
  font-size: 18px;
  color: coral;
}
.dialog_span1 {
  font-size: 16px;
  line-height: 15px;
}
.picDiv {
  display: inline-block;
  width: 270px;
  height: 280px;
  margin-right: 10px;
}
.picDiv img {
  padding-right: 10px;
}
.picName {
  text-align: center;
  font-size: 16px;
}
.tableInfo {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
}
.tableInfo td,
.tableInfo th {
  border: 1px solid #333;
  color: #666;
  height: 60px;
}
.tdName {
  font-size: 18px;
  width: 100px;
  background-color: #cad9ea;
}
.tdInfo {
  font-size: 16px;
}
.show{
  display: none;
}
.editForm{
  background-color: #fff;
  width: 50%;
}
/* .me{
  overflow: scroll;
} */
</style>
